
<template>
  <div class="play1 base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'play6',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        tabs: [{
          img: 'static/hohoplay/6/1.png',
          url: 'static/hohoplay/pdf/6/课件 - 神奇弹力球.pdf',
          data: [{
            isSelected: 1,
            name: '弹力球1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-01/弹力球1.mp4'
          }, {
            isSelected: 0,
            name: '弹力1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-01/弹力1.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/2.png',
          url: 'static/hohoplay/pdf/6/课件 - 竹签陀螺.pdf',
          data: [{
            isSelected: 1,
            name: '竹签陀螺1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-02/竹签陀螺1.mp4'
          }, {
            isSelected: 0,
            name: '竹签陀螺2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-02/竹签陀螺2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/3.png',
          url: 'static/hohoplay/pdf/6/课件 - 针孔相机.pdf',
          data: [{
            isSelected: 1,
            name: '针孔相机',
            url: STATICPATH + '/hohoplay/video/6/K-L6-03/针孔相机.mp4'
          }, {
            isSelected: 0,
            name: '针孔2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-03/针孔2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/4.png',
          url: 'static/hohoplay/pdf/6/课件 - 抽拉式万花筒.pdf',
          data: [{
            isSelected: 1,
            name: '万花筒',
            url: STATICPATH + '/hohoplay/video/6/K-L6-04/万花筒.mp4'
          }, {
            isSelected: 0,
            name: '万花筒2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-04/万花筒2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/5.png',
          url: 'static/hohoplay/pdf/6/课件 - 气球直升机.pdf',
          data: [{
            isSelected: 1,
            name: '直升飞机1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-05/直升飞机1.mp4'
          }, {
            isSelected: 0,
            name: '飞机怎么飞起来',
            url: STATICPATH + '/hohoplay/video/6/K-L6-05/飞机怎么飞起来.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/6.png',
          url: 'static/hohoplay/pdf/6/课件 - 净水实验.pdf',
          data: [{
            isSelected: 1,
            name: '净水实验1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-06/净水实验1.mp4'
          },
          {
            isSelected: 0,
            name: '净水实验2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-06/净水实验2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/7.png',
          url: 'static/hohoplay/pdf/6/课件 - 鲁班锁.pdf',
          data: [{
            isSelected: 1,
            name: '中国古人留下来的智慧：榫卯结构 ！不用钉子的匠心设计！',
            url: STATICPATH + '/hohoplay/video/6/K-L6-07/中国古人留下来的智慧：榫卯结构 ！不用钉子的匠心设计！.mp4'
          }, {
            isSelected: 0,
            name: '孔明锁 - Kong Ming lock solutions',
            url: STATICPATH + '/hohoplay/video/6/K-L6-07/孔明锁 - Kong Ming lock solutions.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/8.png',
          url: 'static/hohoplay/pdf/6/课件 - 气球吹起来.pdf',
          data: [{
            isSelected: 1,
            name: '三合一吹气球',
            url: STATICPATH + '/hohoplay/video/6/K-L6-08/三合一吹气球.mp4'
          }, {
            isSelected: 0,
            name: 'BLOWING UP GIANT BALLOON 原理片头',
            url: STATICPATH + '/hohoplay/video/6/K-L6-08/BLOWING UP GIANT BALLOON 原理片头.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/9.png',
          url: 'static/hohoplay/pdf/6/课件 - 自制杆秤.pdf',
          data: [{
            isSelected: 1,
            name: '自制杆称1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-09/自制杆称1.mp4'
          }, {
            isSelected: 0,
            name: '自制杆称2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-09/自制杆称2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/10.png',
          url: 'static/hohoplay/pdf/6/课件 - 变大变小.pdf',
          data: [{
            isSelected: 1,
            name: '变大变小1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-10/变大变小1.mp4'
          }, {
            isSelected: 0,
            name: '变大变小2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-10/变大变小2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/11.png',
          url: 'static/hohoplay/pdf/6/课件 - 昆虫运动.pdf',
          data: [{
            isSelected: 1,
            name: '昆虫运动1 (1)',
            url: STATICPATH + '/hohoplay/video/6/K-L6-11/昆虫运动1 (1).mp4'
          }, {
            isSelected: 0,
            name: '昆虫运动1 (2)',
            url: STATICPATH + '/hohoplay/video/6/K-L6-11/昆虫运动1 (2).mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/12.png',
          url: 'static/hohoplay/pdf/6/课件 - 恐龙化石.pdf',
          data: [{
            isSelected: 1,
            name: '恐龙1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-12/恐龙1.mp4'
          }, {
            isSelected: 0,
            name: '恐龙2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-12/恐龙2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/13.png',
          url: 'static/hohoplay/pdf/6/课件 - 云霄飞车.pdf',
          data: [{
            isSelected: 1,
            name: '云霄飞车1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-13/云霄飞车1.mp4'
          }, {
            isSelected: 0,
            name: '云霄飞车2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-13/云霄飞车2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/14.png',
          url: 'static/hohoplay/pdf/6/课件 - 气垫船.pdf',
          data: [{
            isSelected: 1,
            name: '气垫船1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-14/气垫船1.mp4'
          }, {
            isSelected: 0,
            name: '气垫船2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-14/气垫船2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/15.png',
          url: 'static/hohoplay/pdf/6/课件 - 七彩音乐瓶.pdf',
          data: [{
            isSelected: 1,
            name: '七彩音乐瓶1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-15/七彩音乐瓶1.mp4'
          }, {
            isSelected: 0,
            name: '七彩音乐瓶2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-15/七彩音乐瓶2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/6/16.png',
          url: 'static/hohoplay/pdf/6/课件 - 自制风扇.pdf',
          data: [{
            isSelected: 1,
            name: '自制风扇1',
            url: STATICPATH + '/hohoplay/video/6/K-L6-16/自制风扇1.mp4'
          }, {
            isSelected: 0,
            name: '自制风扇2',
            url: STATICPATH + '/hohoplay/video/6/K-L6-16/自制风扇2.mp4'
          }]
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.play1 > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 230px;
  left: 190px;
  width: 910px;
  height: 35px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 9px;
  position: initial;
}
</style>
